I'm trying to create a date picker. When the user press on the "OK" button the modal should have closed but it keeps reopening. I'm using react-native-datetimepicker. I did tried putting setShow(false) when the "OK" button is pressed but it still open for a split second.
const [receiptDate, setReceiptDate] = React.useState("");
const [date, setDate] = React.useState(new Date());
const [today, setToday] = React.useState(new Date());
const [show, setShow] = React.useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setDate(currentDate);
if (event.type == "dismissed") {
console.log("CANCEL")
setShow(false)
return null;
} else {
setShow(false)
console.log("OK")
let tempDate = new Date(currentDate);
let fDate = tempDate.getFullYear() + "-" + tempDate.getDate() + "-" + (tempDate.getMonth() + 1)
setReceiptDate(fDate);
console.log(fDate);
return;
}
}
<View>
<TouchableOpacity activeOpacity={0.9} onPress={() => setShow(true)}>
<TextInput
editable={false}
placeholder="YYYY-MM-DD (2022-05-22)"
value={receiptDate}
/>
</TouchableOpacity>
{show && (
<DateTimePicker
testID='dateTimePicker'
value={date}
mode={'date'}
display='default'
onChange={onChange}
maximumDate={today}
/>)}
</View>
In my opinion, you are not setting show to false, in case if the user selects an option. Please try this and let me know if it fixes your problem or not:
const onChange = (event, selectedDate) => {
if (event.type == 'set') {
const currentDate = selectedDate || startDate;
let tempDate = new Date(currentDate);
let fDate = tempDate.getFullYear() + "-" + tempDate.getDate() + "-" + (tempDate.getMonth() + 1)
setReceiptDate(fDate);
setDate(currentDate);
}
setShow(false)
}